/design-systems
Los sistemas son cómo los productos escalan.
Un Design System no es una galería de componentes: es una forma de trabajar. Tokens compartidos, patrones documentados y gobernanza que reducen la deuda de diseño y aceleran a los equipos.
--accent: #5B5CEB
--radius-card: 24px
--spacing-base: 8px
--motion: 250ms ease-out
--shadows: 2
/práctica — 01
Qué incluye un sistema que funciona.
01 · tokens
Fundamentos compartidos
Color, tipografía, espaciado y movimiento como variables — una sola fuente de verdad para diseño y código.
02 · componentes
Una responsabilidad cada uno
Componentes con API clara, estados definidos y accesibilidad incorporada — nunca secciones monolíticas.
03 · documentación
Decisiones explicadas
Cuándo usar cada patrón y por qué existe. La documentación convierte criterio individual en criterio de equipo.
04 · gobernanza
Evolución sin ruptura
Versionado, contribución y revisión: el sistema crece con el producto sin fragmentarse.
/en-vivo — 02
Este portfolio también es un sistema.
Todo lo que ves — tipografía, acento único, pills, cards de 24px, grid de 8pt — sale del mismo conjunto de tokens. El sistema completo está documentado y navegable.
portfolio-design-system · v1.0
Fundamentos, tokens y 15 componentes
Colores, tipografía, espaciado, botones, cards, timeline, formularios — con modo claro y oscuro, y tokens CSS listos para copiar.
Explorar el sistema →
Primario
Secundario
Ghost
1 acento · neutros
Card · radius 24
shadow-01 · hover shadow-02
/resultados — 03
Sistemas aplicados a producto real.
collaborative perks
3→1
Tres librerías divergentes unificadas en un sistema con tokens compartidos entre squads.
allianz
AA
Accesibilidad WCAG AA incorporada al sistema sobre una base enterprise con restricciones legacy.
método
tokens → UI
Del token al componente y del componente a la pantalla — nunca al revés. Así la consistencia no depende de la memoria.